<template>
  <div class="login-box">
    <template v-if="!userInfo.phone">
      <img src="@/assets/img/avatar.png" alt="头像" />
      <h2 @click="goLogin">登录/注册</h2>
    </template>
    <template v-else>
      <img :src="userInfo.avatar" alt="头像" />
      <h2>{{ userInfo.nickname }}</h2>
    </template>
  </div>
</template>

<script>
export default {
  name: "Login",
  data() {
    return {
      userInfo: {
        phone: "",
      },
    };
  },
  created() {
    if (sessionStorage.getItem("userInfo")) {
      this.userInfo = JSON.parse(sessionStorage.getItem("userInfo"));
    }
  },
  methods: {
    goLogin() {
      this.$router.push("/login");
    },
  },
};
</script>

<style lang="scss" scoped>
.login-box {
  padding: 0 16px;
  width: 100%;
  height: 1.4rem;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  img {
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 50%;
    border: 1px solid #ccc;
    overflow: hidden;
  }
  h2 {
    margin-left: 20px;
    font-size: 0.38rem;
  }
}
</style>